<template>
  
        <div class="goodsEntry">
            <!-- <div>入库</div> -->
          <ul class="query">
            <li class="query-item">
              <el-button type="primary" size="medium" @click="newlybuild">新建仓库</el-button>
              <!-- <el-button type="primary" size="medium" @click="exportData">导出</el-button> -->
              
            </li>
           
          </ul>
          <!-- <el-row class="entry-info">
             
           
          
           <el-col :span="4" :offset="2" class="btn-wrapper">
              <el-button type="primary" size="small" @click="okentry">确认入库</el-button>
              <el-button type="warning" size="small" @click="canceloffAll">取消录入</el-button>
            </el-col>
            
          </el-row> -->
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border>
             
              <el-table-column align="center" prop="id" label="序号" width="100">
              </el-table-column>
              <el-table-column align="center" prop="cellar_name" label="仓库名称">
              </el-table-column>
              <el-table-column align="center" prop="link_man" label="联系人">
              </el-table-column>
              <el-table-column align="center" prop="link_way" label="联系方式">
              </el-table-column>
              <el-table-column align="center" prop="address" label="地址">
              </el-table-column>
              <el-table-column align="center" prop="service_time" label="服务时间">

              </el-table-column>
              <el-table-column align="center" prop="status" label="状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == 0">
                      正常
                    </div>
                    <div v-else>禁用</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button @click="picClick(scope.row)" type="text" size="small">图片</el-button>
                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="cargo(scope.row)">货位管理</el-button>
                    <el-button type="text" size="small" @click="canceloffOne(scope.row)">删除</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status == 0" @click="stopstatus(scope.row)">禁用</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status == 1" @click="stopstatus(scope.row)">启用</el-button>
                  <!-- <span class="canceloff-btn" @click="canceloffOne">编辑</span>
                  <span class="canceloff-btn" @click="canceloffOne">货物管理</span>
                  <span class="canceloff-btn" @click="canceloffOne">删除</span>
                  <span class="canceloff-btn" @click="canceloffOne">禁用</span> -->
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background 
            :current-page="page.current"
            :page-size="page.pageSize" 
            :total="page.total" 
            @current-change="handleCurrentChange"
            layout="total,prev, pager, next,jumper" 
           >
            </el-pagination>
          </div>
          
          <el-dialog :title="newTitle" :visible.sync="goodsCates.show">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="cellarName">
                  <el-input v-model="form.cellarName" placeholder="请填写仓库名称" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth" prop="linkMan">
                    <el-input v-model="form.linkMan" placeholder="请填写联系人" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="linkWay">
                    <el-input v-model.number="form.linkWay" placeholder="请填写联系方式" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" placeholder="请填写详细地址(如省，市，区 ，街道)" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="服务时间" :label-width="formLabelWidth" prop="serviceTime">
                    <el-input v-model="form.serviceTime" placeholder="请填写服务时间，如周一至周日(9:00-18:00)" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="酒窖图片(仅支持一张)" :label-width="formLabelWidth" prop="file">
                    <el-upload
                    class="upload-demo"
                    :limit="1"
                    drag
                    ref="uploadImg"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :before-upload="beforeAvatarUpload"
                    :auto-upload="false"
                    :file-list="fileList"
                    :on-change="filearr"
                    :on-preview="handlePreview"
                    list-type="picture"
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg/bmp/gif图片，大小为1031px*552px</div>
                  </el-upload>
                </el-form-item>
               
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="goodsCates.show = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
              </div>
            </el-dialog>
        </div>
      </template>
      
      <script>
        import {isvalidPhone}  from '../../../axios/isvalidPhone';
        var validPhone=(rule, value,callback)=>{
            if (!value){
                callback(new Error('请输入电话号码'))
            }else  if (!isvalidPhone(value)){
              callback(new Error('请输入正确的11位手机号码'))
            }else {
                callback()
            }
        }
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                starttime:'',
                endtime:'',
                keyword:'',
                category:''
              },
              goodsCates: {
                show: false,
              },
              newTitle:'',
              tableData: [{}],
              form: {
              cellarName: '',
              linkMan:'',
              linkWay:'',
              address:'',
              serviceTime:'',
              file:'',
              
            },
            uploaddown:true,
            fileList:[],
            rules: {
              cellarName: [
                { required: true, message: '请输入仓库名称', trigger: 'blur' },
               
              ],
              linkMan: [
                { required: true, message: '请输入联系人', trigger: 'blur' },
                
              ],
              linkWay: [
                { required: true, trigger: 'blur' ,validator: validPhone},
               
              ],
              address: [
                { required: true, message: '请输入地址', trigger: 'blur' },
                
              ],
              serviceTime:[
              { required: true, message: '请输入服务时间', trigger: 'blur' },
              ],
              // file:[
              // { required: true, message: '请选择图片', trigger: 'blur' ,type:'object'},
              // ]
            },
            formLabelWidth: '200px',
              page: {
                pageSize: 10,
                current: 1,
                total: null
              },
            statusid:{}
              
            };
          },
          mounted () {
            this.tableList();
            
          },
          computed: {
            updownload(){
              if(this.fileList != []){
               return  false
              }else{
                return true
              }
              
            }
          },
          methods: {
           
            
           canceloffOne(row) {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.delete(row.id)
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
              
            },
            handleCurrentChange(val) {
              this.page.current = val;
              this.tableList();
              console.log(val);
            },
            showCateDialog() {
             
            },
            //新增
            newlybuild(){
              this.goodsCates.show = true;
              this.newTitle = '新建仓库';
              this.form.cellarName = '';
              this.form.linkMan = '';
              this.form.linkWay = '';
              this.form.address = '';
              this.form.serviceTime = '';
            },
            //编辑
            editClick(row){
              console.log(row);
              this.form.cellarName = row.cellar_name;
              this.form.linkMan = row.link_man;
              this.form.linkWay = row.link_way;
              this.form.address = row.address;
              this.form.serviceTime = row.service_time;
              this.form.file = row.pic
              this.fileList = [{name:row.fileName,url:row.pic}]
              this.form.status = row.status 
              this.form.id = row.id;
              this.goodsCates.show = true;
              this.newTitle = '编辑仓库'
            },
            //图片
            picClick(row){
              window.location.href=row.pic
            },
            //提交
            submitForm(formName) {
              // console.log(formName)
              // this.addList();
              // return
              this.$refs[formName].validate((valid) => {
                if (valid) {
                 if(this.newTitle == '新建仓库'){
                  this.addList();
                 }else{
                   console.log(123)
                  this.updateList(this.form)
                 }
                } else {
                  // console.log('error submit!!');
                  return false;
                }
              });
            },
            //货位管理
            cargo(row){
                this.$router.push('/cellarManagement/'+row.id)
            },
            //删除
            del(row){
              console.log(row)
              
            },
            //状态
            stopstatus(row){
             
              let status = ''
              if(row.status=="1"){
                status = '禁用'
              }else{
                status = '启用'
              }
              this.statusid.status = row.status == '0' ? '1':'0'
              this.statusid.id = row.id;
              this.$confirm("确认是否"+status+ "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.storestatus(this.statusid);
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            //初始化数据
            async tableList() {
              try {
                let { data } = await this.$post({
                  api: "/cellar/show/cellarList",
                  data:this.page
                });
                if (data.code === 0) {
                  this.tableData = data.data;
                  this.page.total = data.rdPage.total;
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            handlePreview(file){
              console.log(file)
            },
            //图片
            beforeAvatarUpload(file){
              console.log(file)
              // const isLt2M = file.size / 1024 / 1024 < 2;
            },
            filearr(file, fileList){
              
              
              
            },
           //添加
           async addList() {

            
             const fd = new FormData()
              Object.entries(this.form).forEach(arr=>{
                let v = arr[1]
                if(arr[0] === 'file'){
                  try{
                    v = this.$refs['uploadImg'].uploadFiles[0].raw
                  }catch(e){
                    console.warn('e:',e.message)
                  }
                }
                fd.append(arr[0], v)
              })
              // fd.append('file',this.$refs['uploadImg'].uploadFiles[0].raw)
              try {
                let { data } = await this.$post({
                  api: "/cellar/add/cellar",
                  data:fd,
                  isFormData:true
                  // data:this.form
                });
                if (data.code === 0) {
                  console.log(data)
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  // this.$message({
                  //   type: "error",
                  //   message: data.msg
                  // });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
            },
            //编辑
            async updateList(params) {
              const fd = new FormData()
              Object.entries(params).forEach(arr=>{
                let v = arr[1]
                if(arr[0] === 'file'){
                  try{
                    v = this.$refs['uploadImg'].uploadFiles[0].raw
                  }catch(e){
                    console.warn('e:',e.message)
                  }
                }
                fd.append(arr[0], v)
              })
              try {
                let { data } = await this.$post({
                  api: "/cellar/update/cellar",
                  data:fd,
                  isFormData:true
                });
                if (data.code === 0) {
                  console.log(data)
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            //删除
            async delete(id) {
              try {
                let { data } = await this.$post({
                  api: "/cellar/delete/cellar",
                  data:{
                    id:id
                  }
                });
                console.log(data)
                if (data.code === 0) {
                 
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                // this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            //状态
            async storestatus(params){
              try{
                let {data} = await this.$post({
                  api: "/cellar/update/status",
                  data:params
                })
                if(data.code === 0){
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                  this.tableList();
                  // console.log(data)
                }else{
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              }catch(e){
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>
    
    